<template>
  <div>
    <!-- <h1>商品详情</h1> -->
    <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow />

    <div>
      <img
        class="imgurl"
        :src="goodsInfo.img ? $img + goodsInfo.img : ''"
        alt=""
      />
    </div>
    <p>{{ goodsInfo.goodsname }}</p>
    <!-- 商品的价格 -->
    <p>￥{{ goodsInfo.price }}</p>
    <!-- 购买数量 -->
    <div>
      购买数量
      <van-stepper v-model="value" min="1" max="5" />
    </div>
    <div>
      商品属性：
      <van-button
        v-for="item in goodsInfo.specsattr"
        :key="item"
        type="warning"
        >{{ item }}</van-button
      >
    </div>
    <div>
      商品详情：
      <div v-html="goodsInfo.description"></div>
    </div>

    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="" />
      <van-goods-action-button
        @click="goCart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetail, addCart } from "..//util/axios";
import {Dialog}  from'vant'

export default {
  data() {
    return {
      goodsInfo: "",
      value: 1,
    };
  },
  components: {},
  methods: {
    goCart() {
      if (this.$store.state.userInfo) {
        addCart({
          uid: this.$store.getters.getUserInfo.uid,
          goodsid: this.goodsInfo.id,
          num: this.value,
        }).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$router.push("/cart");
          }
        });
      } else {
        Dialog.alert({
          title: "没订单",
          message: "没订单页",
        }).then(() => {
          // on close
        });
      }
    },
    goBuy() {
      Dialog.alert({
        title: "去订单页",
        message: "提交订单",
      }).then(() => {
        // on close
      });
    },
  },
  mounted() {
    getGoodsDetail({ id: this.$route.query.id }).then((res) => {
      if (res.code == 200) {
        this.goodsInfo = res.list[0];
        this.goodsInfo.price = res.list[0].price.toFixed(2);
        this.goodsInfo.specsattr = this.goodsInfo.specsattr
          ? this.goodsInfo.specsattr.split(",")
          : [];
      }
      console.log(res);
    });
  },
};
</script>

<style lang="" scoped>
.imgurl {
  width: 100%;
  height: 5rem;
}
</style>
